<template>
  <!-- <div class="error404">
        <error code="403" title="您的账号权限不足，请联系管理员添加权限！" :show-btn="false">
            <template #content>
                <div class="flex justify-center">
                    <img class="w-[150px] h-[150px]" src="@/assets/images/no_perms.png" alt="" />
                </div>
            </template>
        </error>
    </div> -->

  <iframe
    src="http://localhost:9898/"
    id="myFrame"
    frameborder="0"
    @load="onLoad"
    ref="iframeRef"
    width="100%"
    height="800px"
  >
  </iframe>
</template>

<script lang="ts" setup>
const iframeRef = ref();
const onLoad = () => {
  console.log("window.frames", frames);
  const iframeWindow = window.frames[0]; // 获取iframe的window对象
  nextTick(() => {
    iframeWindow.postMessage(
      {
        type: "preview",
        data: {},
      },
      "*"
    );
  });
};

onMounted(() => {
  window.addEventListener("message", (event) => {
    console.log("间听到消息", event);
    console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
  });
});
</script>
